<template>
  <div class="EditMyself-main">
    <p class="icon-line">
      <span class="goBack" @click='goBack'><i class="el-icon-back"></i></span>
      <span class="determine" @click='determine'><i class="el-icon-check"></i></span>
    </p>
    <h2 class="picture">
      <el-divider>
        <el-avatar :size="80" :src="img_url"></el-avatar>
      </el-divider>
    </h2>
    <el-divider content-position="left">账号</el-divider>
    <el-input v-model="myself.account_number"></el-input>
    <el-divider content-position="left">姓名</el-divider>
    <el-input v-model="myself.user_name"></el-input>
    <el-divider content-position="left">电话</el-divider>
    <el-input v-model="myself.mobile"></el-input>
    <el-divider content-position="left">邮箱</el-divider>
    <el-input v-model="myself.email"></el-input>
    <el-divider content-position="left">年级</el-divider>
    <el-input v-model="myself.grade"></el-input>
    <el-divider content-position="left">班级</el-divider>
    <el-input v-model="myself.class"></el-input>
    <el-divider content-position="left">QQ</el-divider>
    <el-input v-model="myself.qq"></el-input>
    <el-divider></el-divider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //个人信息数据
        myself: {},
        img_url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      }
    },
    created() {
      //从本地存储中读取信息
      const myself = window.sessionStorage.getItem('myself')
      if (myself == null) { //如果本地没有信息，则发送请求
        this.getMyself()
      } else { //如果本地有信息，则使用本地信息
        this.myself = JSON.parse(myself)
        this.img_url = ('http://www.aynu.xyz:8000' + this.myself.img_url)
      }
    },
    methods: {
      //获取个人信息
      getMyself: async function () {
        const {
          data: res
        } = await this.$http.get('/myself')
        if (res.data.success == false) return this.$message.error(res.meta.message)
        this.myself = res.data
        if (this.myself.img_url) {
          this.img_url = ('http://www.aynu.xyz:8000' + this.myself.img_url)
        }
        window.sessionStorage.setItem('myself', JSON.stringify(res.data))
      },
      //返回，不保存
      goBack: function () {
        this.$router.back(-1)
      },
      //提交修改
      determine: async function () {
        const {
          data: res
        } = await this.$http.put('/myself', {
          account_number: this.myself.account_number,
          user_name: this.myself.user_name,
          mobile: this.myself.mobile,
          email: this.myself.email,
          grade: this.myself.grade,
          class: this.myself.class,
          qq: this.myself.qq
        })
        // console.log(res);
        if (res.meta.success !== true) return this.$message.error(res.meta.message)
        this.$message.success(res.meta.message);
        window.sessionStorage.setItem('myself', JSON.stringify(this.myself))
        this.$router.push('/myself/show')

      }
    }
  }

</script>

<style lang="less">
  //编辑个人信息
  .EditMyself-main {

    //图标行
    .icon-line {
      margin: 10px 0;
      height: 30px;
      overflow: hidden;

      //退回按钮
      .goBack {
        float: left;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
      }

      .goBack:hover {
        color: goldenrod;
      }

      //确定提交按钮
      .determine {
        float: right;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
        color: rgb(54, 223, 54);
      }

      .determine:hover {
        color: rgb(120, 194, 10);
      }
    }

    //输入框
    .el-input {
      margin: 0 auto;
      width: 50%;
      text-align: center;
    }

    //分割线
    .el-divider {
      margin: 15px auto;
    }

    //头像展示行
    .picture {
      height: 70px;
      margin: 5px;
      display: flex;
      align-items: center;
    }
  }

</style>
